<template>
  <view class="normal-login-container">
		<view class=""  v-if="step == 1">
			<view  class="logo-content align-center justify-center flex">
			  <image style="width: 370rpx;height: 310rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
			  </image>
			</view>
			<view class="login-form-content"  v-if="loginType == 1">
				<view class="input-item flex align-center">
				  <input v-model="name" class="input" type="text" placeholder="请输入租户" maxlength="30" @confirm='checkName' @blur="checkName"/>
				</view>
			  <view class="input-item flex align-center">
			    <input v-model="loginForm.username" class="input" type="text" placeholder="请输入用户名" maxlength="30" />
			  </view>
				<view class="input-item flex align-center">
				  <input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" :password="showPassword" />
					<uni-icons :type="showPassword ? 'eye-slash' : 'eye'" @click="changePassword" class="isShow-eye" size="26"></uni-icons>
				</view>
			  <!-- <view class="input-item flex align-center" v-if="captchaEnabled">
			    <view class="iconfont icon-code icon"></view>
			    <input v-model="loginForm.code" class="input" placeholder="请输入验证码" maxlength="5" />
			    <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
			  </view> -->
			  <view class="action-btn">
			    <button @click="handleAdminLogin" class="login-btn cu-btn block bg-blue lg round" >登录</button>
			  </view>
			</view>
			<view class="login-form-content"  v-if="loginType == 2">
			  <view class="input-item flex align-center">
			    <input v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号" maxlength="30" />
			  </view>
				<view class="input-item flex align-center">
				  <input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" :password="showPassword" />
					<uni-icons :type="showPassword ? 'eye-slash' : 'eye'" @click="changePassword" class="isShow-eye" size="26"></uni-icons>
				</view>
			  <!-- <view class="input-item flex align-center" v-if="captchaEnabled">
			    <view class="iconfont icon-code icon"></view>
			    <input v-model="loginForm.code" class="input" placeholder="请输入验证码" maxlength="5" />
			    <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
			  </view> -->
			  <view class="action-btn">
			    <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			  </view>
			</view>
			<view class="register" >
				<text  v-if="loginType == 2" @click="codelogin">验证码登录</text>
				<text  v-if="loginType == 2" @click="register">注册账号</text>
				<text @click="forget">忘记密码</text>
				<text @click="replace">切换身份</text>
			</view>
		</view>
    <!-- <view class="xieyi text-center">
      <text class="text-grey1">登录即代表同意</text>
      <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
      <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
    </view> -->
		<view class="step-one" v-else>
			<uni-title type="h1" title="请选择登录身份" class="title"></uni-title>
			<button  class="btn" value="0" @tap="clickBtn(0)">以管理员身份登录</button>
			<button  class="btn" value="1" @tap="clickBtn(1)">以家长身份登录</button>
		</view>
  </view>
</template>

<script>
  import { getCodeImg ,getIdByName} from '@/api/login'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
				showPassword:true,
				name:null,
        loginForm: {
					name:"",
          username: "",
          password: "",
          code: "",
          uuid: ''
        },
				loginType:uni.getStorageSync('loginType'),
				step:uni.getStorageSync('loginType') ? 1 : 0,
				isCheckName:false
      }
    },
    created() {
    },
		onReady() {
			
		},
    methods: {
			clickBtn(e){
				if(e == 0){
					this.loginType = 1
					this.step = 1
					uni.setStorageSync('loginType', 1)
				}else if(e == 1){
					uni.setStorageSync('loginType', 2)
					this.loginType = 2
					this.step = 1
				}
			},
			replace(){
				this.step = 0
			},
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
			//验证码登录
			codelogin(){
				this.$tab.navigateTo(`/pages/codelogin`)
			},
			//注册账号
			register(){
				this.$tab.navigateTo(`/pages/register`)
			},
			//忘记密码
			forget(){
				this.$tab.navigateTo(`/pages/forget`)
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
      // 获取图形验证码
      getCode() {
        // getCodeImg().then(res => {
        //   res = res.data;
        //   this.captchaEnable = res.enable;
        //   if (this.captchaEnable) {
        //     this.codeUrl = "data:image/gif;base64," + res.img;
        //     this.loginForm.uuid = res.uuid;
        //   }
        // })
      },
			checkName(e){
				let name = e.detail.value
				if(name == ''){
					 this.$modal.msgError("租户名不能为空")
				}else{
					let data={
						name
					}
					getIdByName(data).then(res=>{
						if(res.data == null){
							this.$modal.msgError("该租户不存在")
						}else{
							this.isCheckName =true
						}
					})
				}
				
			},
			
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的用户名")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        }  else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
	// 登录方法
	async handleAdminLogin() {
		if(!this.isCheckName){
			this.$modal.msgError("租户名不正确")
		}else if (this.loginForm.username === "") {
		this.$modal.msgError("请输入您的用户名")
	  } else if (this.loginForm.password === "") {
		this.$modal.msgError("请输入您的密码")
	  }  else {
		this.$modal.loading("登录中，请耐心等待...")
		this.adminLogin()
	  }
	},
			
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          
        })
      },
	// 管理员登录
	async adminLogin() {
	  this.$store.dispatch('adminLogin', this.loginForm).then(() => {
		this.$modal.closeLoading()
		this.loginSuccess()
	  }).catch(() => {
	  })
	},
      // 登录成功后，处理函数
      loginSuccess(result) {
		if(this.loginType==1){
			// 设置用户信息
			this.$store.dispatch('GetAdminInfo').then(res => {
			  this.$tab.reLaunch('/pages/work/index')
			})
		}else{
			// 设置用户信息
			this.$store.dispatch('GetInfo').then(res => {
			  this.$tab.reLaunch('/pages/work/index')
			})
		}
        
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F8FAFC;
  }
	.step-one{
		padding: 100rpx 60rpx;
		margin: 100rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
		.title{
			line-height: 50rpx;
		}
		.btn{
			margin: 20rpx 0;
			background: #FF9A50;
			color: #fff;
			font-size: 14px;
			line-height: 50px;
		}
	}

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 10%;
      width: 80%;

      .input-item {
        margin: 40rpx auto;
        background-color: #ffffff;
        height: 100rpx;
        border-radius: 20rpx;
				box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }
				.uni-icons{
					color: #999 !important;
					padding-right: 10rpx;
				}
        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 30px;
        }

      }

      .login-btn {
        margin-top: 60rpx;
        height: 100rpx;
				background: #FF9A50;
				border-radius: 20rpx;
      }
			
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
    }

    .easyinput {
      width: 100%;
    }
  }
	.register{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 100rpx;
		text{
			color: #979797;
		}
	}
  .login-code-img {
    height: 45px;
  }
	.popup-body{
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			.popup-view{
				padding-bottom: 40rpx;
				.imgView{
					overflow: hidden;
					margin: 0 auto;
				}
				.textView{
					line-height: 50rpx;
					padding: 20rpx 40rpx;
					font-size: 24rpx;
					letter-spacing: 1rpx;
					text{
						display:block;
					}
					.title{
						font-size: 14px;
						font-family: Inter-Bold, Inter;
						font-weight: bold;
						text-align: center;
					}
				}
				.coursebtn{
					width: 500rpx;
					height: 100rpx;
					background: #FF9A50;
					border-radius: 20rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					color: #fff;
					margin: 30rpx auto;
					display: block;
				}
			}
		}
	
</style>
